<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
import { Lock, User } from '@element-plus/icons-vue'

const router = useRouter()
const authStore = useAuthStore()

const loginForm = reactive({
  username: '',
  password: ''
})

const loading = ref(false)

const handleLogin = () => {
  if (!loginForm.username || !loginForm.password) {
    ElMessage.warning('请输入用户名和密码')
    return
  }

  loading.value = true

  // 使用 setTimeout 模拟网络请求
  setTimeout(() => {
    const success = authStore.login(loginForm.username, loginForm.password)

    if (success) {
      ElMessage.success(`欢迎回来，${loginForm.username}！`)
      router.push('/dashboard')
    } else {
      ElMessage.error('用户名或密码错误')
    }

    loading.value = false
  }, 800)
}
</script>

<template>
  <div class="login-container">
    <div class="tile-decoration"></div>
    <div class="login-box">
      <div class="login-header">
        <img src="@/assets/bathroom-logo.svg" alt="Logo" class="logo" />
        <h2>卫生间管理系统</h2>
      </div>

      <el-form class="login-form" :model="loginForm">
        <el-form-item>
          <el-input
            v-model="loginForm.username"
            placeholder="用户名"
            :prefix-icon="User"
            clearable
            class="bathroom-input"
          />
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="密码"
            :prefix-icon="Lock"
            show-password
            @keyup.enter="handleLogin"
            class="bathroom-input"
          />
        </el-form-item>

        <div class="login-tips">
          <p>管理员账号: admin / admin123</p>
          <p>游客账号: guest / guest123</p>
        </div>

        <el-form-item>
          <el-button
            type="primary"
            class="login-button"
            :loading="loading"
            @click="handleLogin"
          >
            登录
          </el-button>
        </el-form-item>

        <div class="register-link">
          没有账号？<router-link to="/register">立即注册</router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e0f7fa;
background-image: repeating-linear-gradient(45deg, rgba(25, 118, 210, 0.1) 0px, rgba(25, 118, 210, 0.1) 20px, transparent 20px, transparent 40px);
  position: relative;
  overflow: hidden;
}

/* 卫生间特色装饰元素 */
.login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: repeating-linear-gradient(
    90deg,
    #42a5f5,
    #42a5f5 20px,
    #1976d2 20px,
    #1976d2 40px
  );
}

/* 瓷砖装饰 */
.login-container .tile-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.login-container .tile-decoration::before,
.login-container .tile-decoration::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(66, 165, 245, 0.2);
}

.login-container .tile-decoration::before {
  top: 15%;
  left: 15%;
  animation: float 8s infinite ease-in-out;
}

.login-container .tile-decoration::after {
  bottom: 15%;
  right: 15%;
  animation: float 6s infinite ease-in-out reverse;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.login-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%2342a5f5" fill-opacity="0.5" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,224C672,213,768,171,864,149.3C960,128,1056,128,1152,149.3C1248,171,1344,213,1392,234.7L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
  background-size: cover;
  background-repeat: no-repeat;
}

.login-box {
  width: 400px;
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.9);
border: 2px solid #1976d2;
border-top: 8px solid #1976d2;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 1;
  position: relative;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.logo {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
}

.login-header h2 {
  font-size: 24px;
  color: #1976d2;
  margin: 0;
  position: relative;
}

.login-header h2::after {
  content: '💧';
  position: absolute;
  font-size: 14px;
  top: -5px;
  right: -15px;
  animation: drip 2s infinite;
}

@keyframes drip {
  0% { opacity: 0; transform: translateY(-5px); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px); }
}

.login-form {
  margin-top: 20px;
}

.login-button {
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  background: linear-gradient(90deg, #1976d2, #42a5f5);
  border: none;
  position: relative;
  overflow: hidden;
}

.login-button::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  animation: water-flow 2s infinite;
}

@keyframes water-flow {
  0% { transform: translateX(-100%); }
  50%, 100% { transform: translateX(100%); }
}

.register-link {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
  color: #666;
}

.register-link a {
  color: #1976d2;
  text-decoration: none;
  font-weight: bold;
}

.register-link a:hover {
  text-decoration: underline;
}

.login-tips {
  margin: 10px 0 20px;
  font-size: 12px;
  color: #999;
  line-height: 1.5;
  background-color: rgba(224, 247, 250, 0.5);
  border-radius: 8px;
  padding: 10px;
  border-left: 4px solid #42a5f5;
  position: relative;
}

.login-tips::before {
  content: '💦';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  opacity: 0.7;
}
.bathroom-input :deep(.el-input__wrapper) {
  background-color: rgba(224, 247, 250, 0.5);
  border: 1px solid #42a5f5;
  box-shadow: 0 0 0 1px rgba(66, 165, 245, 0.2);
}

.bathroom-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #1976d2;
  border-color: #1976d2;
}

.bathroom-input :deep(.el-input__inner)::placeholder {
  color: #64b5f6;
}

/* 添加瓷砖风格的输入框装饰 */
.el-form-item {
  position: relative;
}

.el-form-item::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #42a5f5;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
}
</style>
